<template>
  <div class="subject_list_details_content_wrap">
    <headers>
      <span slot="title">专栏详情</span>
    </headers>
    <div class="subject_list_details_content">
      <h3 v-html="subject_list_details.title"></h3>
      <img :src="subject_list_details.pic">
      <div v-html="subject_list_details.content" class="main"></div>
    </div>
  </div>
</template>
<script>
  import headers from '../../components/headers.vue'

  export default {
    data() {
      return {
        subject_list_details: []
      }
    },
    components: {
      headers
    },
    mounted() {
      this.$API.subject_detail(this.$route.query.id).then((res) => {
        // console.log(res);
        this.subject_list_details = res.data.data
      }).catch((err) => {
        console.log(err);
      });

    }
  }
</script>

<style lang="scss" scoped>
.subject_list_details_content_wrap{
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
    img {
    width: 100vw;
    height: 35vh;
  }
    .subject_list_details_content {
      flex: 1;
      overflow: scroll;
    h3 {
      text-align: center;
    }
    .main {
      width: 100vw;
      height: auto;


    }
  }

}


</style>